<template>
	<view class="wrap">
		<view class="search">
			<u-search v-model="keywords" @custom="search" @search="search"></u-search>
		</view>
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" />
		<!-- 待处理 -->
		<view v-if="current === 0">
			<scroll-view class="scroll-list msg-list-item" scroll-y="true">
				<view v-for="(item,index) in doMsgList" :key="index">
					<view class="msg-time">{{item.messageDetail.time.split(' ')[1]}}</view>
					<!-- 好友申请 -->
					<u-card @click="navTo(1,index)" v-if="item.messageDetail.type===1" class="task-list-item"
						:border="false" padding="20" margin="10rpx 20rpx">
						<view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
							<view style="display: flex;align-items: center;font-size: 30rpx;">
								<image class="user-images" :src="item.img" />
								来自{{item.nickName}}的好友申请
							</view>
							<view style="color: #999999;font-size: 22rpx;">
								{{item.messageDetail.time.split(' ')[0]}}
							</view>
						</view>
						<view class="" slot="body">
							<u-row gutter="16">
								<u-col span="12">
									<view class="apply-text"><span>申请类型：</span>好友申请</view>
								</u-col>
								<u-col span="12">
									<view class="apply-text">
										<span>发送时间：</span>
										{{item.messageDetail.time}}
									</view>
								</u-col>
							</u-row>
						</view>
						<view class="apply-list-foot" slot="foot">
							<u-row gutter="16">
								<u-col span="6" text-align="center">
									<view class="agree-text">同意</view>
								</u-col>
								<u-col span="6" text-align="center">
									<view class="refuse-text">拒绝</view>
								</u-col>
							</u-row>
						</view>
					</u-card>
					<!-- 授课申请 -->
					<u-card @click="navTo(2,index)" v-if="item.messageDetail.type===2" class="task-list-item"
						:border="false" padding="20" margin="10rpx 20rpx">
						<view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
							<view style="display: flex;align-items: center;font-size: 30rpx;">
								<image class="user-images" :src="item.img" />
								来自{{item.nickName}}的授课申请
							</view>
							<view style="color: #999999;font-size: 22rpx;">
								{{item.messageDetail.time.split(' ')[0]}}
							</view>
						</view>
						<view class="" slot="body">
							<u-row gutter="16">
								<u-col span="12">
									<view class="apply-text"><span>申请类型：</span>授课申请</view>
								</u-col>
								<u-col span="12">
									<view class="apply-text">
										<span>发送时间：</span>
										{{item.messageDetail.time}}
									</view>
								</u-col>
							</u-row>
						</view>
						<view class="apply-list-foot" slot="foot">
							<u-row gutter="16">
								<u-col span="6" text-align="center">
									<view class="agree-text">同意</view>
								</u-col>
								<u-col span="6" text-align="center">
									<view class="refuse-text">拒绝</view>
								</u-col>
							</u-row>
						</view>
					</u-card>
					<!-- 签约申请 -->
					<u-card @click="navTo(3,index)" v-if="item.messageDetail.type===3" class="task-list-item"
						:border="false" padding="20" margin="10rpx 20rpx">
						<view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
							<view style="display: flex;align-items: center;font-size: 30rpx;">
								<image class="user-images" :src="item.img" />
								来自{{item.nickName}}的签约申请
							</view>
							<view style="color: #999999;font-size: 22rpx;">
								{{item.messageDetail.time.split(' ')[0]}}
							</view>
						</view>
						<view class="" slot="body">
							<u-row gutter="16">
								<u-col span="12">
									<view class="apply-text"><span>申请类型：</span>签约申请</view>
								</u-col>
								<u-col span="12">
									<view class="apply-text">
										<span>发送时间：</span>
										{{item.messageDetail.time}}
									</view>
								</u-col>
							</u-row>
						</view>
						<view class="apply-list-foot" slot="foot">
							<u-row gutter="16">
								<u-col span="6" text-align="center">
									<view class="agree-text">同意</view>
								</u-col>
								<u-col span="6" text-align="center">
									<view class="refuse-text">拒绝</view>
								</u-col>
							</u-row>
						</view>
					</u-card>
					<!-- 解约申请 -->
					<u-card @click="navTo(4,index)" v-if="item.messageDetail.type===4" class="task-list-item"
						:border="false" padding="20" margin="10rpx 20rpx">
						<view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
							<view style="display: flex;align-items: center;font-size: 30rpx;">
								<image class="user-images" :src="item.img" />
								来自{{item.nickName}}的解约申请
							</view>
							<view style="color: #999999;font-size: 22rpx;">
								{{item.messageDetail.time.split(' ')[0]}}
							</view>
						</view>
						<view class="" slot="body">
							<u-row gutter="16">
								<u-col span="12">
									<view class="apply-text"><span>申请类型：</span>解约申请</view>
								</u-col>
								<u-col span="12">
									<view class="apply-text">
										<span>发送时间：</span>
										{{item.messageDetail.time}}
									</view>
								</u-col>
							</u-row>
						</view>
						<view class="apply-list-foot" slot="foot">
							<u-row gutter="16">
								<u-col span="6" text-align="center">
									<view class="agree-text">同意</view>
								</u-col>
								<u-col span="6" text-align="center">
									<view class="refuse-text">拒绝</view>
								</u-col>
							</u-row>
						</view>
					</u-card>
				</view>
				<u-divider>已经到底了</u-divider>
			</scroll-view>
		</view>
		<!-- 已同意 -->
		<view v-if="current === 1">
			<scroll-view class="scroll-list msg-list-item" scroll-y="true">
				<u-card v-for="index in 5" :key="index" class="task-list-item" :border="false" padding="20"
					margin="20rpx">
					<view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
						<view style="display: flex;align-items: center;font-size: 30rpx;">
							<image class="user-images" src="/static/aidex/images/user06.png"></image>比利的授课申请
						</view>
						<view style="color: #999999;font-size: 22rpx;">2021年10月24日</view>
					</view>
					<view class="" slot="body">
						<u-row gutter="16">
							<u-col span="12">
								<view class="apply-text"><span>申请类型：</span>授课</view>
							</u-col>
							<u-col span="12">
								<view class="apply-text"><span>开始时间：</span>2021年10月25日14:30</view>
							</u-col>
							<u-col span="12">
								<view class="apply-text"><span>结束时间：</span>2021年10月27日14:30</view>
							</u-col>
						</u-row>
					</view>
					<view class="apply-list-foot" slot="foot" style="text-align: right;color: #58ca93;">
						申请通过
					</view>
				</u-card>
				<u-divider>已经到底了</u-divider>
			</scroll-view>
		</view>
		<!-- 已拒绝 -->
		<view v-if="current === 2">
			<scroll-view class="scroll-list msg-list-item" scroll-y="true">
				<u-card v-for="index in 2" :key="index" class="task-list-item" :border="false" padding="20"
					margin="20rpx">
					<view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
						<view style="display: flex;align-items: center;font-size: 30rpx;">
							<image class="user-images" src="/static/aidex/images/user06.png"></image>比利的好友申请
						</view>
						<view style="color: #999999;font-size: 22rpx;">2021年10月24日</view>
					</view>
					<view class="" slot="body">
						<u-row gutter="16">
							<u-col span="12">
								<view class="apply-text"><span>申请类型：</span>好友申请</view>
							</u-col>
							<u-col span="12">
								<view class="apply-text"><span>申请时间：</span>2021年10月25日14:30</view>
							</u-col>
						</u-row>
					</view>
					<view class="apply-list-foot" slot="foot" style="text-align: right;color: #ff4400;">
						已拒绝
					</view>
				</u-card>
				<u-divider>已经到底了</u-divider>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keywords: '',
				list: [{
					name: '待处理'
				}, {
					name: '已同意',
				}, {
					name: '已拒绝',
				}],
				current: 0,
				doMsgList: []

			};
		},
		onLoad() {
			this.doMsgList = this.$store.state.doMsgList
		},
		methods: {
			change(index) {
				this.current = index;
			},
			navTo(type, index) {
				uni.navigateTo({
					url: '/pages/sys/msg/details?index=' + index + '&type=' + type
				});
			},
			search(value) {
				this.$u.toast('搜索内容为：' + value)
			}

		}
	};
</script>
<style lang="scss">
	@import '../../../common/uni.css';

	page {
		background-color: #f5f5f5;
	}
	
	image{
		border-radius: 50%;
	}

	.wrap .search {
		background: #ffffff;
	}

	.u-dropdown {
		background: #ffffff;
	}

	.msg-time {
		font-size: 26rpx;
		padding: 5px 0;
		color: #999999;
		text-align: center;
	}

	.u-card__foot {
		.u-icon {
			margin-right: 10px;
		}
	}

	.apply-text {
		font-size: 28rpx;
		color: #333333;

		span {
			color: #999999;
		}
	}

	.user-images {
		width: 28px;
		height: 28px;
		margin-right: 8px;
	}

	.apply-list-foot {
		font-size: 28rpx;
		justify-content: space-around;
	}

	.personnel-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.personnel-user {
			position: relative;
			margin: 5px 9px 0;
		}

		.user-images {
			width: 32px;
			height: 32px;
			margin-right: 0;

		}

		.iconfont {
			position: absolute;
			top: -12px;
			right: -5px;
			color: #FE0100;
		}
	}

	.agree-text {
		color: #4094ff;
	}

	.refuse-text {
		color: #ff4400;
	}
</style>
